import React, { useState, useEffect } from 'react';

const RoomControls = ({ webRTCService, onRoomJoined }) => {
  const [roomIdInput, setRoomIdInput] = useState('');
  const [joiningRoom, setJoiningRoom] = useState(false);
  const [error, setError] = useState(null);

  // 当WebRTC服务初始化或更新时，设置错误处理
  useEffect(() => {
    if (webRTCService) {
      // 监听WebRTC服务的错误
      webRTCService.on('error', (errorMessage) => {
        setError(`WebRTC错误: ${errorMessage}`);
        setJoiningRoom(false);
      });
    }
  }, [webRTCService]);

  // 处理创建房间
  const handleCreateRoom = () => {
    if (!webRTCService) {
      setError('WebRTC服务未初始化，请刷新页面重试');
      return;
    }

    try {
      setJoiningRoom(true);
      setError(null);
      console.log('RoomControls: 创建新房间');
      
      const roomId = webRTCService.createRoom();
      console.log('RoomControls: 房间创建成功，ID:', roomId);
      
      // 通知父组件
      if (onRoomJoined) {
        onRoomJoined(roomId, true);
      }
    } catch (error) {
      console.error('RoomControls: 创建房间失败:', error);
      setError(`创建房间失败: ${error.message}`);
      setJoiningRoom(false);
    }
  };

  // 处理加入房间
  const handleJoinRoom = () => {
    if (!webRTCService) {
      setError('WebRTC服务未初始化，请刷新页面重试');
      return;
    }

    if (!roomIdInput.trim()) {
      setError('请输入有效的房间ID');
      return;
    }

    try {
      setJoiningRoom(true);
      setError(null);
      console.log('RoomControls: 加入房间:', roomIdInput);
      
      webRTCService.joinRoom(roomIdInput);
      
      // 通知父组件
      if (onRoomJoined) {
        onRoomJoined(roomIdInput, false);
      }
    } catch (error) {
      console.error('RoomControls: 加入房间失败:', error);
      setError(`加入房间失败: ${error.message}`);
      setJoiningRoom(false);
    }
  };

  return (
    <div className="room-controls">
      <h2>创建或加入房间</h2>
      
      {error && (
        <div className="error-message" style={{ color: 'red', marginBottom: '10px' }}>
          {error}
        </div>
      )}
      
      <div className="create-room">
        <button 
          onClick={handleCreateRoom} 
          className="btn primary" 
          disabled={joiningRoom}
        >
          {joiningRoom ? '处理中...' : '创建新房间'}
        </button>
      </div>
      
      <div className="join-room">
        <input
          type="text"
          placeholder="输入房间ID"
          value={roomIdInput}
          onChange={(e) => setRoomIdInput(e.target.value)}
          disabled={joiningRoom}
        />
        <button 
          onClick={handleJoinRoom} 
          className="btn secondary"
          disabled={joiningRoom || !roomIdInput.trim()}
        >
          {joiningRoom ? '加入中...' : '加入房间'}
        </button>
      </div>
      
      <div className="room-instructions">
        <p>
          <strong>使用说明:</strong>
        </p>
        <ol>
          <li>创建一个新房间，或输入已有房间ID加入房间</li>
          <li>房间创建者可以共享屏幕，其他用户可以观看</li>
          <li>确保两台设备都连接到同一个局域网</li>
          <li>如果看不到画面，请检查浏览器是否支持WebRTC并已授予屏幕共享权限</li>
        </ol>
      </div>
    </div>
  );
};

export default RoomControls; 